<script setup>
  import {ref} from 'vue'
  //v-model用在其它表单元素上
    // 1.输入框
    // 2.文本框 textarea
  let txt = ref("")
    // 3.下拉菜单-绑定给select,并通过影响value影响菜单内容
  let city = ref("")
    // 4.单选框-需要手动填写value,并绑定同一个v-model
  let blood = ref("")
    // 5.复选框
      // 1.只有一个复选框：给布尔值,直接绑定即可
  let isAgee = ref(false)
      // 2.有多个复选框：
  let like = ref([])
</script>

<template>
  <div>
    <!-- 文本框 -->
    <textarea v-model="txt"></textarea><br>
    <!-- 下拉菜单 -->
    <select v-model="city">
      <option value="BJ">北京</option>
      <option value="SH">上海</option>
      <option value="SZ">深圳</option>
      <option value="HZ">杭州</option>
      <option value="CS">长沙</option>
    </select><br>
    <!-- 单选框 -->
    <input type="radio" value="A" v-model="blood">A
    <input type="radio" value="B" v-model="blood">B
    <input type="radio" value="AB" v-model="blood">AB
    <input type="radio" value="O" v-model="blood">O <br>
    <!-- 复选框 -->
    <!-- 单个复选框 -->
    <input type="checkbox" v-model="isAgee">是否同意协议<br>
    <!-- 多个复选框 -->
    <input type="checkbox" value="lq" v-model="like">篮球
    <input type="checkbox" value="zq" v-model="like">足球
    <input type="checkbox" value="qq" v-model="like">球球
    <input type="checkbox" value="yq" v-model="like">圆球
  </div>
</template>

<style scoped>

</style>